<template>
    <div ref="chart" class="chart">
<div>81263472396</div>
        <el-button @click="getboxTop"> 123</el-button>
    </div>
</template>

<script setup lang="ts">
import {reactive,ref,onMounted,onUpdated} from 'vue'
import {boxTopInt} from '@/type/Show'
import {setBoxchart} from '@/composables/chart/bar'
import { Color } from '@/composables/chart/pub'
import { reqBoxoffice } from '@/api';
// import {} from 'echarts/charts'
import * as echarts from 'echarts/core';
const boxTop:{
    list:Array<boxTopInt>
} = reactive({
    list :[]
})
// 展示的区域
const chart = ref()
// 接收后端返回的数据
// 获取数据的方法
function getboxTop(){
    let data = {
        code:'200',
        msg:'success',
        list:[
            {
                name:"1",
                date:2534,
                types:"keke",
                direct:'we',
                boxoffice:'1432'
            },
            {
                name:"2",
                date:23435,
                types:'keke',
                direct:'we',
                boxoffice:'345'
            },  {
                name:"3",
                date:23435,
                types:'keke',
                direct:'ee',
                boxoffice:'324536'
            },

        ]
    }
    console.log( data.list)

        boxTop.list = data.list
    console.log( data.list)

        const {boxData,nameData} = formatData(boxTop.list)
        let option = setBoxchart(nameData,boxData)
        let mychart = echarts.init(chart.value)
        option && mychart.setOption(option)

}
// 转换数据的方法
const formatData = (list :Array<boxTopInt>):{boxData:Array<any>,nameData:Array<string>}=>{

    console.log('测试')
    console.log(list)
    // 横轴数据
    let boxData:Array<any> = []
    // 纵轴数据
    let nameData:Array<string> = []
    let j = 0
    for(let i of list){
        let name:string = i.name
        nameData.push(name)
        let str:string = i.boxoffice
        str = str.replace(',','')
        let value = Number(str)
        let box = {
            value,
            itemStyle:{
                color:Color(j%10)
            }

        }
        boxData.push(box)
        j++
    }

    return {boxData:boxData,nameData:nameData}
}
// 获取数据
onMounted(() => {
    console.log("进来了")
    getboxTop()
})
onUpdated(() => {
    console.log("进来了，更新")
    getboxTop()
})

</script>

<style lang="scss" scoped>
    .chart{
        height: 100%;
    }
</style>